<div class="container">
  <div class="row">
    <div class="col">
      <div
        class="align-items-center d-flex flex-column justify-content-center mb-4 w-100"
      >
        <gf-logo size="medium" />
      </div>

      @if (!hasError) {
        <div class="col d-flex justify-content-center">
          <mat-spinner [diameter]="20" />
        </div>
      } @else {
        <div
          class="align-items-center col d-flex flex-column justify-content-center"
        >
          <h1 class="d-flex h5 justify-content-center mb-0 text-center">
            <ng-container i18n>Oops, authentication has failed.</ng-container>
          </h1>
          <button
            class="mt-4"
            color="primary"
            mat-flat-button
            (click)="signIn()"
          >
            <ng-container i18n>Try again</ng-container>
          </button>
          <div class="my-2 text-muted">
            <ng-container i18n>or</ng-container>
          </div>
          <button mat-stroked-button (click)="deregisterDevice()">
            <ng-container i18n>Go back to Home Page</ng-container>
          </button>
        </div>
      }
    </div>
  </div>
</div>
